<form name="addCatrgory" 
      class="category-edit-form" 
      [formGroup]="editForm" 
      (ngSubmit)="onSubmit(editForm.value)">
  <div class="form-group" 
        [ngClass]="{
          'has-error': (!name.valid && name.touched), 
          'has-success': (name.valid && name.touched)
        }">
    <label for="categoryName">
      <h5>名称</h5>
    </label>
    <input type="text" 
           class="form-control" 
           id="categoryName" 
           placeholder="分类名称" 
           [formControl]="name">
    <span class="help-block sub-little-text">这将是它在站点上显示的名字</span>
  </div>
  <div class="form-group" 
       [ngClass]="{
          'has-error': (!slug.valid && slug.touched), 
          'has-success': (slug.valid && slug.touched)
      }">
    <label for="categorySlug">
      <h5>别名</h5>
    </label>
    <input type="text" 
           class="form-control" 
           id="categorySlug" 
           placeholder="分类别名" 
           [formControl]="slug">
    <span class="help-block sub-little-text">“别名”是在URL中使用的别称，建议小写，字母、数字、连字符（-）</span>
  </div>
  <div class="form-group" 
      [ngClass]="{
        'has-error': (!pid.valid && pid.touched), 
        'has-success': (pid.valid && pid.touched)
      }">
    <label for="categoryParent">
      <h5>父分类</h5>
    </label>
    <select class="form-control c-select" id="categoryParent" [formControl]="pid">
      <option value="">无</option>
      <ng-template [ngIf]="categories && categories.data.length">
        <option *ngFor="let cate of categories.data" 
                [ngValue]="cate._id" 
                [disabled]="!!category && category._id == cate._id">
          <span *ngIf="cate.level">└</span>
          <span *ngFor="let num of categoryLevelMark(cate.level)">─</span>
          <span>{{ cate.name }}</span>
        </option>
      </ng-template>
    </select>
    <span class="help-block sub-little-text">可以选择父级分类</span>
  </div>
  <div class="form-group" 
        [ngClass]="{
          'has-error': (!description.valid && description.touched), 
          'has-success': (description.valid && description.touched)
        }">
    <label for="categoryDescription">
      <h5>描述</h5>
    </label>
    <textarea name="categoryDescription"
              id="categoryDescription"
              class="form-control category-description"
              cols="30"
              rows="20"
              placeholder="分类描述"
              [formControl]="description">
    </textarea>
    <span class="help-block sub-little-text">该分类的描述</span>
  </div>
  <div  class="form-group"
        [ngClass]="{ 
          'has-error': (!extends.valid && extends.touched), 
          'has-success': (extends.valid && extends.touched)
        }">
    <label for="category_extends">
      <h5>自定义扩展</h5>
    </label>
    <div class="category-extend" *ngFor="let extend of extends.value; let i = index">
      <div class="extend-key">
        <input type="text" 
               id="category_name"
               class="form-control"
               placeholder="key" 
               [(ngModel)]="extend.name"
               [ngModelOptions]="{ standalone: true }">
      </div>
      <div class="extend-value">
        <input type="text" 
               id="category_name"
               class="form-control"
               placeholder="value" 
               [(ngModel)]="extend.value"
               [ngModelOptions]="{ standalone: true }">
      </div>
      <div class="extend-del">
        <button class="btn btn-warning" 
                (click)="delExtendItem(i)"
                [disabled]="extends.value.length < 2">
          <i class="ion-trash-b"></i>
        </button>
      </div>
    </div>
    <a [href]="" class="btn btn-default btn-sm btn-block" (click)="addExtendItem()">增加扩展</a>
    <span class="help-block sub-little-text">可以为当前标签扩展自定义扩展属性</span>
  </div>
  <hr>
  <div class="row">
    <div class="col-sm-12">
      <button type="submit" 
          class="btn btn-success" 
          [disabled]="!editForm.valid || submitState.ing">
        <span *ngIf="submitState.ing">分类{{ category ? '修改' : '添加' }}中</span>
        <span *ngIf="!submitState.ing">{{ category ? '修改' : '添加' }}分类目录</span>
      </button>
      <span>&nbsp;</span>
      <button class="btn btn-default" (click)="resetForm()">重置</button>
    </div>
  </div>
</form>
